<!--
 * @Author: cheung0
 * @Date: 2021-11-20 15:13:40
-->
<template>
  <div style="padding: 10px">
    <el-button type="primary" @click="add" style="margin: 10px 5px 15px 0px"
      >新增
    </el-button>
    <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
      <el-form
        :label-position="(labelPosition = 'top')"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="学号">
          <el-input v-model="formLabelAlign.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-radio v-model="formLabelAlign.roleId" label="1"
            >普通用户</el-radio
          >
          <el-radio v-model="formLabelAlign.roleId" label="0"
            >超级管理员</el-radio
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Id" prop="id"></el-table-column>
      <el-table-column label="学号" prop="userName"></el-table-column>
      <el-table-column label="密码" prop="password"></el-table-column>
      <el-table-column label="角色" prop="roles[0].roleName"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @keyup.enter.native="submit"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            style="margin-right: 5px"
            @click="
              edit(
                scope.row.id,
                scope.row.userName,
                scope.row.password,
                scope.row.roles[0].roleName
              )
            "
            >编辑
          </el-button>
          <el-popconfirm
            confirm-button-text="是的"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除该用户？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="pageCount"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import qs from "qs";

export default {
  data() {
    return {
      flag: 0,
      tableData: [],
      pageSize: 7,
      pageCount: 1,
      dialogVisible: false,
      formLabelAlign: {},
      search: "",
      currentPage: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      request.get("/api/user/getUserByPage/" + val + "/7").then((res) => {
        this.tableData = res.data.dataCurrentPage;
        this.pageCount = res.data.totalPageNum;
      });
    },
    add() {
      this.flag = 1;
      this.dialogVisible = true;
      console.log(this.formLabelAlign.userName);
      this.formLabelAlign = {};
    },
    async save() {
      if (this.flag === 1) {
        this.dialogVisible = false;
        const res = await request.post(
          "/api/user/add",
          qs.stringify(this.formLabelAlign)
        );
        if (res.data.success !== true) {
          this.$notify({
            title: "失败",
            message: res.data.message,
            type: "error",
            duration: 3000,
          });
        } else {
          this.$notify({
            title: "成功",
            message: res.data.message,
            type: "success",
            duration: 3000,
          });
        }
        const response = await request.get(
          "/api/user/getUserByPage/" + this.pageCount + "/7"
        );
        this.tableData = response.data.dataCurrentPage;
        this.pageCount = response.data.totalPageNum;
        this.flag = 0;
      } else {
        this.dialogVisible = false;
        await request.post(
          "/api/user/update",
          qs.stringify(this.formLabelAlign)
        );
        const response = await request.get(
          "/api/user/getUserByPage/" + this.currentPage + "/7"
        );
        this.tableData = response.data.dataCurrentPage;
        this.pageCount = response.data.totalPageNum;
        this.$notify({
          title: "成功",
          message: "更新成功！",
          type: "success",
          duration: 3000,
        });
      }
    },
    edit(id, userName, password, roleName) {
      this.dialogVisible = true;
      this.flag = 0;
      this.formLabelAlign.id = id;
      this.formLabelAlign.userName = userName;
      this.formLabelAlign.password = password;
      console.log(roleName);
      if (roleName === "ROLE_admin") {
        this.formLabelAlign.roleId = 0;
      } else {
        this.formLabelAlign.roleId = 1;
      }
    },
    async handleDelete(id) {
      const res = await request.delete("/api/user/delete/" + id);
      this.$notify({
        title: "成功",
        message: res.data.message,
        type: "success",
        duration: 500,
      });
      const response = await request.get(
        "/api/user/getUserByPage/" + this.currentPage + "/7"
      );
      this.tableData = response.data.dataCurrentPage;
      this.pageCount = response.data.totalPageNum;
    },
    submit() {
      request.get("/api/user/getByUserName/" + this.search).then((res) => {
        console.log(res);
        if (res.data != null) {
          this.tableData = [];
          this.tableData.push(res.data.data);
          this.total = 1;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
  },
  mounted() {
    request.get("/api/user/getUserByPage/1/7").then((res) => {
      console.log(res);
      this.tableData = res.data.dataCurrentPage;
      this.pageCount = res.data.totalPageNum;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>
